<template>
  <div class="pass-theme">
    <!-- title -->
    <PageTitle :hasHr="false">
      <template #prepend>
        <el-button
          text
          class="w-8 mr-1"
          style="font-size: 24px"
          @click="push('/pass-center/index')"
        >
          <svg-icon icon-class="DArrowLeft" />
        </el-button>
      </template>
      <template #rightButtons>
        <el-button type="primary" @click="push('/pass-settings')">
          <svg-icon icon-class="OutlinedSetting" />
        </el-button>
        <el-button
          @click="() => (displayType = 'Grid')"
          :type="displayType === 'Grid' ? 'primary' : ''"
        >
          <svg-icon icon-class="Grid" />
        </el-button>
        <el-button
          @click="() => (displayType = 'List')"
          :type="displayType === 'List' ? 'primary' : ''"
        >
          <svg-icon icon-class="Expand" />
        </el-button>
      </template>
      {{ t('flypass.pass_manage') }}
      <template #subtitle>
        {{ t('flypass.passtheme_subtitle') }}
      </template>
    </PageTitle>

    <div>
      <el-tabs v-model="activeTab">
        <el-tab-pane :label="t('flypass.store_card_pass')" name="storeCardPass">
          <el-card
            :body-style="displayType === 'Grid' ? { padding: '20px 10px' } : {padding: '0 0 10px 0'}"
            shadow="never"
            :page-size="10"
            :total="total"
            :current-page="pageNo"
            @current-change="currentChangeHandle"
          >
            <template #header>
              <el-form inline :model="dataForm" @submit.native.prevent>
                <el-form-item>
                  <el-input
                    :maxlength="maxLength.topicName"
                    v-model="dataForm.topicName"
                    :placeholder="t('modules.pass.pass_name')"
                    clearable
                    @blur="() => (dataForm.topicName = dataForm.topicName.trim())"
                    @keyup.enter.native="
                      () => {
                        getData()
                        pageNo = 1
                      }
                    "
                  />
                </el-form-item>
                <el-form-item>
                  <el-select
                    :placeholder="t('appstore.application.status')"
                    v-model="dataForm.status"
                    clearable
                  >
                    <template #label="{ label, value }">
                      <el-tag>
                        {{ label }}
                      </el-tag>
                    </template>
                    <el-option :value="TopicStatus.InUse" :label="t('flypass.in_use')">
                      <el-tag :type="mapTagType[TopicStatus.InUse]">{{
                        t('flypass.in_use')
                      }}</el-tag>
                    </el-option>
                    <el-option :value="TopicStatus.Normal" :label="t('merchant.normal')">
                      <el-tag :type="mapTagType[TopicStatus.Normal]">{{
                        t('merchant.normal')
                      }}</el-tag>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    class="w-8"
                    @click="
                      () => {
                        getData()
                        pageNo = 1
                      }
                    "
                  >
                    <svg-icon icon-class="search" />
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" class="w-8" @click="onAddPass">
                    <svg-icon icon-class="plus" />
                  </el-button>
                </el-form-item>
              </el-form>
            </template>
            <el-row :gutter="8" v-if="displayType === 'Grid'">
              <el-col :span="4" v-for="t in topics" style="margin-bottom: 8px">
                <el-card
                  class="rounded-md relative"
                  shadow="hover"
                  :body-style="{ padding: '0px' }"
                >
                  <div class="mt-2 mr-2 flex justify-end">
                    <el-dropdown>
                      <el-button text size="small" class="w-6">
                        <svg-icon icon-class="MoreFilled" />
                      </el-button>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item @click.native="goTopicDetail(t.topicId)">
                            <svg-icon icon-class="outlined-edit" />
                            {{ $t('common.detail') }}
                          </el-dropdown-item>
                          <el-dropdown-item @click.native="setTopic(t.topicId)">
                            <svg-icon icon-class="outlined-highlight" />
                            {{ $t('flypass.set_pass_enable') }}
                          </el-dropdown-item>
                          <el-dropdown-item @click.native="openSetIssuerDialog(t.topicId)">
                            <span class="text-center">
                              <svg-icon icon-class="Shop" /> {{ $t('flypass.set_issuer') }}
                            </span>
                          </el-dropdown-item>
                          <el-dropdown-item @click.native="deleteTheme(t.topicId)" danger>
                            <span class="text-center"
                              ><svg-icon icon-class="Delete" /> {{ $t('page.delete') }}</span
                            >
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                  <div class="p-5">
                    <div class="flex flex-col items-center">
                      <div>
                        <a @click="">
                          <img
                            width="150"
                            :src="baseurl + '/tempres/' + t.templatesInfoVo[0].thumbUrl"
                            class="rounded"
                          />
                        </a>
                      </div>
                      <span class="text-sm leading-md font-bold">{{ t.topicName }}</span>
                    </div>
                    <div class="mt-4 text-sm">
                      <div class="list-group-item">
                        <span>Status:</span>
                        <el-tag :type="mapTagType[t.status]">
                          {{
                            t.status === TopicStatus.InUse
                              ? $t('flypass.in_use')
                              : $t('merchant.normal')
                          }}
                        </el-tag>
                      </div>
                      <div class="list-group-item">
                        <span>{{ $t('flypass.merchantPassIssuer') }}:</span>
                        <el-tooltip
                          v-if="t.merchantPassIssuer.length > 0"
                          :content="t.merchantPassIssuer.join(',')"
                        >
                          <span
                            style="
                              white-space: nowrap;
                              text-overflow: ellipsis;
                              overflow: hidden;
                              width: 50px;
                            "
                            class="inline-block"
                            >{{ t.merchantPassIssuer.join(',') }}</span
                          >
                        </el-tooltip>
                      </div>
                      <div class="list-group-item">
                        <span>{{ $t('operator.creTime') }}</span>
                        <span>{{ dateFilter(t.creTime) }}</span>
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="4">
                <div class="new-template" @click="onAddPass">
                  <svg-icon icon-class="OutlinedPlus" class-name="plus-icon"></svg-icon>
                  <span>{{ t('flypass.new_pass') }}</span>
                </div>
              </el-col>
            </el-row>
            <topic-table
              v-else
              :topicList="topics"
              :request="getData"
              @open-dialog="(topicId) => openSetIssuerDialog(topicId)"
            />
            <el-pagination :total="topics.length" :page-size="10" @current-change="getData"></el-pagination>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </div>
    <set-issuer v-model:visible="setIssuerVisible" :topic-id="topicId" @save="getData" />
    <new-pass-dialog v-model:visible="newPassDialogVisible" @save="getData" />
  </div>
</template>

<script lang="ts" setup>
import { dateFilter } from '@/filters'
import { getAllTopicsAndTemplates, newTopic } from '@/api/topic/topic'
import { Topic, TopicStatus } from '@/api/topic/topicModel'
import PageTitle from '@/components/PageTitle/index.vue'
import { maxLength } from '@/api/topic/rules'
import SetIssuer from './set-issuer.vue'
import topicTable from './topic-table.vue'
import { useTopic } from '@/views/pass-center/topic/useTopic'
import newPassDialog from './new-pass-dialog.vue'

type DisplayType = 'Grid' | 'List'

const pageNo = ref(1)
const total = ref(0)
const baseurl = import.meta.env.VITE_APP_PROXY
const topics = ref<Topic[]>([])
const topicId = ref<number | null>(null)
const { t } = useI18n()
const { push } = useRouter()
const displayType = ref<DisplayType>('Grid')
const activeTab = ref('storeCardPass')
const setIssuerVisible = ref(false)
const newPassDialogVisible = ref(false)

const mapTagType = {
  [TopicStatus.Normal]: 'info',
  [TopicStatus.InUse]: 'success'
}

const dataListLoading = ref(false)
const dataForm = ref<{ topicName: string; status: TopicStatus | '' }>({
  topicName: '',
  status: ''
})

onMounted(() => {
  getData()
})

async function getData() {
  dataListLoading.value = true
  topics.value = await getAllTopicsAndTemplates({
    pageNo: 1,
    pageSize: 10,
    topicName: dataForm.value.topicName,
    status: dataForm.value.status
  })
  topics.value.forEach((t) => {
    t.templatesInfoVo.forEach((template) => {
      template.thumbUrl += `?t=${new Date().getTime()}`
    })
  })
  dataListLoading.value = false
}

function openSetIssuerDialog(id: number) {
  console.log(topicId)
  topicId.value = id
  setIssuerVisible.value = true
}

const { goTopicDetail, setTopic, deleteTheme } = useTopic(getData)

function currentChangeHandle(val: number) {
  pageNo.value = val
  getData()
}
// 新增Pass
function onAddPass() {
  newPassDialogVisible.value = true
}
</script>

<style lang="scss" scoped>
@use './mixin.scss' as *;
@include newTemplate;
.new-template {
  height: 491px;
}
.theme-card {
  margin: 5px;
  border: 1px solid #edf2f9;
  min-height: 2em;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: 6px;
}

.list-group-item {
  border-bottom: 1px solid #edf2f9;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
}
</style>
